<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :class="{show: show}" :style="{top: top + 'px' }" >
			<view class="click-btn" @tap="show = !show" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
				<view>一键通</view>
			</view>
			<view class="nav-box">
				<view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
					<view class="nav-icon" :style="{backgroundColor: btn.bgcolor}">{{btn.icon}}</view>
					<view class="nav-text">{{btn.text}}</view>
				</view>
			</view>
		</view>
		<wyb-modal
		 ref="modal" 
		 :title= nowTitle 
		 :content= nowContent
		 cancel-text="取消"
		 cancel-color="#A9A9A9"
		 :confirm-text= nowConfirmText
		 :confirm-color= nowConfirmTextColor
		 animation="slide-down"
		 @cancel="onCancelClick"
		 @confirm="onConfirmClick" />
	</view>
</template>

<script>
import request from "../../untils/request.js";
import wybModal from '../wyb-modal/wyb-modal.vue';
export default {
	props:{
		exchangeType:{
			type:String,
			default:""
		}
	},
	components:{
	    wybModal
	},
	data() {
		return {
			batchOperateType: 0,
			nowTitle: "",
			nowContent: "",
			nowConfirmText: "",
			nowConfirmTextColor: '',
			showConfirmToastText: "",
			show: false ,// 是否显示
			top: 200,	// 顶端距离 
			deviationTop: 0,	// 偏移量
			windowHeight: uni.getSystemInfoSync().windowHeight,	// 视图高度 
			btnList: [		// 所有按钮 
				/* {
					icon: '开',
					text: '一键开仓',
					bgcolor: '#007300'
				},
				{
					icon: '停',
					text: '一键暂停',
					bgcolor: '#a39177'
				},
				{
					icon: '平',
					text: '一键平仓',
					bgcolor: '#8f0000'
				}, */
				{
					icon: '设',
					text: '一键设置',
					bgcolor: '#81859a'
				},
				/* {
					icon: '锁',
					text: '锁仓',
					bgcolor: '#000000'
				},
				{
					icon: '解',
					text: '解锁',
					bgcolor: '#d68f00'
				}, */
			]
		};
	},
	methods: {
		// 点击按钮 
		clickBtn: function(btn) {
			this.$emit("pChangeType",null,(requestDataList)=> {
				this.requestDataList = requestDataList;
				if(this.requestDataList.length == 0){
					let html = '<font style="font-size:14px">' + '当前未选择交易对' + '</font>'  
					        plus.nativeUI.toast(html, {  
					            type: 'richtext',  
					            duration: 500,  
					            richTextStyle: {  
					                align: 'center'  
					            },  
					            verticalAlign: 'center'  
					        });
					return;
				}
				if(btn.text == "一键开仓"){
					this.nowTitle = "一键开仓";
					this.nowContent = "您是否要一键开仓？";
					this.nowConfirmText = "一键开仓";
					this.batchOperateType = 0;
					this.nowConfirmTextColor = '#008800'
					this.showConfirmToastText = "开动完成";
					this.$refs.modal.showModal()
				}else if(btn.text == "一键暂停"){
					this.nowTitle = "一键暂停";
					this.nowContent = "您是否要暂停机器人？";
					this.nowConfirmText = "暂停机器人";
					this.batchOperateType = 2;
					this.nowConfirmTextColor = '#CAB493'
					this.showConfirmToastText = "暂停完成";
					this.$refs.modal.showModal()
				}else if(btn.text == "一键平仓"){
					this.nowTitle = "一键平仓";
					this.nowContent = "您是否要一键平仓？";
					this.nowConfirmText = "一键平仓";
					this.batchOperateType = 1;
					this.nowConfirmTextColor = '#91B3B2'
					this.showConfirmToastText = "一键平仓完成";
					this.$refs.modal.showModal()
				}else if(btn.text == "锁仓"){
					this.nowTitle = "锁仓";
					this.nowContent = "您是否要锁仓指定交易对？";
					this.nowConfirmText = "锁仓";
					this.batchOperateType = 3;
					this.nowConfirmTextColor = '#000000'
					this.showConfirmToastText = "锁仓完成";
					this.$refs.modal.showModal()
				}else if(btn.text == "解锁"){
					this.nowTitle = "解锁";
					this.nowContent = "您是否要解锁指定交易对？";
					this.nowConfirmText = "解锁";
					this.batchOperateType = 4;
					this.nowConfirmTextColor = '#ffaa00'
					this.showConfirmToastText = "解锁完成";
					this.$refs.modal.showModal()
				}else if(btn.text == "一键设置"){
					uni.navigateTo({
					    url: '/pages/transset/batchTransset?exchangety='+this.exchangeType+'&batchCoinList='+encodeURIComponent(JSON.stringify(this.requestDataList)),
					});
				}
            });
		},
		// 拖动开始，记录一下偏移量
		touchstart: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			this.deviationTop = touch.clientY - this.top;
			// console.log(this.deviationTop);
		},
		// 上下拖动时 
		touchmove: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			var top = touch.clientY;
			top = top - this.deviationTop;
			if (top < 0) {
				top = 0;
			}
			if (top > this.windowHeight - 40) {
				top = this.windowHeight - 40;
			}
			this.top = top;
			return false;
		},
		batchOperate: function(batchOperateType){
			uni.showLoading({
			    	title:"请求中..."
			})
			let uinfo = uni.getStorageSync('userInfo');
			console.log("this.requestDataList:",this.requestDataList)
			request.postAssets('/assets/quantOperate/batchOperateBot', {
			    userId: uinfo.userId, //用户账户ID
			    operateType: batchOperateType, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
				batchCoinList: this.requestDataList
			}).then(res => {
				uni.hideLoading()
				uni.showToast({title:this.showConfirmToastText,icon:'none',duration: 1000})
				this.show = false;
			})
		},
		onCancelClick(){
			uni.showToast({title:'已取消',icon:'none',duration: 1000})
		},
		onConfirmClick(){
			this.batchOperate(this.batchOperateType);
		}
	}
};
</script>

<style>
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.4);
	}
	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 10001;
		position: fixed;
		width: 100%;
		/* height: 0px; */
		left: 650rpx;
		transition: left 0.5s;
		overflow: hidden;
	}
	/* 展开时 */
	.major-box.show{left: 220rpx;}
	
	.click-btn,
	.nav-box {
		float: left;
	}
	/* 按钮样式 */
	.nav-box{
		background-color: #FFF;
		border-radius: 0 0 0 5px;
	}
	.click-btn {
		width: 100rpx;
		background-color: #7F6AC3;
		color: #fff;
		font-size: 10px;
		text-align: center;
		border-radius: 100rpx 0 0 100rpx;
		line-height: 12px;
		padding: 5px 0;
	}
	.click-btn view {
		padding-left: 15rpx;
	}

	/* 按钮盒子 */
	.nav-box {
		width: 400rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}
	.nav-btn {
		flex: 1;
		border: 0px #000 solid;
		min-width: 150rpx;
		padding: 12rpx 0;
		padding-bottom: 20rpx;
	}
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		font-size: 15px;
		border-radius: 50%;
		background-color: #666;
		color: #fff;
	}
	.nav-text {
		font-size: 12px;
		font-weight: bold;
		margin-top: 8rpx;
	}
</style>
